import React, { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Card, Button, Result } from 'antd';
import { CheckCircleOutlined, HomeOutlined, CalendarOutlined } from '@ant-design/icons';
import './AppointmentSuccess.css';

const AppointmentSuccess = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { doctor, reservationInfo } = location.state || {};

  // 如果没有预约信息，返回首页
  useEffect(() => {
    if (!doctor || !reservationInfo) {
      navigate('/');
    }
  }, [doctor, reservationInfo, navigate]);

  // 生成随机预约号
  const generateReservationNumber = () => {
    const prefix = 'YC';
    const date = new Date();
    const year = date.getFullYear().toString().slice(-2);
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
    return `${prefix}${year}${month}${day}${random}`;
  };

  const reservationNumber = generateReservationNumber();

  // 返回首页
  const handleGoHome = () => {
    navigate('/');
  };

  // 查看我的预约
  const handleViewReservations = () => {
    navigate('/my-reservations');
  };

  if (!doctor || !reservationInfo) {
    return null;
  }

  return (
    <div className="success_d_container">
      {/* 导航栏 */}
      <div className="success_d_nav-bar">
        <h1 className="success_d_page-title">预约成功</h1>
      </div>

      <Card className="success_d_card">
        <Result
          icon={<CheckCircleOutlined className="success_d_icon" />}
          title="预约提交成功"
          subTitle="您的预约已成功提交，请按时前往就诊"
        />

        <div className="success_d_reservation-details">
          <h3 className="success_d_detail-title">预约详情</h3>
          
          <div className="success_d_detail-item">
            <span className="success_d_label">预约编号：</span>
            <span className="success_d_value">{reservationNumber}</span>
          </div>
          
          <div className="success_d_detail-item">
            <span className="success_d_label">医师姓名：</span>
            <span className="success_d_value">{doctor.name}</span>
          </div>
          
          <div className="success_d_detail-item">
            <span className="success_d_label">就诊科室：</span>
            <span className="success_d_value">{doctor.department}</span>
          </div>
          
          <div className="success_d_detail-item">
            <span className="success_d_label">就诊地点：</span>
            <span className="success_d_value">{doctor.hospital}</span>
          </div>
          
          <div className="success_d_detail-item">
            <span className="success_d_label">预约日期：</span>
            <span className="success_d_value">{location.state?.selectedDay}</span>
          </div>
          
          <div className="success_d_detail-item">
            <span className="success_d_label">预约时间：</span>
            <span className="success_d_value">{reservationInfo.timeSlot}</span>
          </div>
          
          <div className="success_d_reminder">
            <p>温馨提示：请提前15分钟到达就诊地点，携带有效证件并出示此预约信息。</p>
          </div>
        </div>

        <div className="success_d_buttons">
          <Button
            className="success_d_button"
            onClick={handleViewReservations}
          >
            <CalendarOutlined />
            查看我的预约
          </Button>
          
          <Button
            className="success_d_button success_d_home-button"
            onClick={handleGoHome}
          >
            <HomeOutlined />
            返回首页
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default AppointmentSuccess;
